<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线练习题系统</title>
    <link rel="stylesheet" href="style.css">
    <!-- Use local icons instead of CDN -->
    <style>
        /* Basic icon replacements */
        .fas, .far {
            display: inline-block;
            width: 1em;
            text-align: center;
        }
        .fa-graduation-cap::before { content: "🎓"; }
        .fa-chart-bar::before { content: "📊"; }
        .fa-heart::before { content: "❤️"; }
        .fa-times-circle::before { content: "❌"; }
        .fa-list::before { content: "📋"; }
        .fa-dot-circle::before { content: "⚪"; }
        .fa-check-square::before { content: "☑️"; }
        .fa-balance-scale::before { content: "⚖️"; }
        .fa-calculator::before { content: "🔢"; }
        .fa-book::before { content: "📚"; }
        .fa-language::before { content: "🌐"; }
        .fa-flask::before { content: "🧪"; }
        .fa-chevron-left::before { content: "◀"; }
        .fa-chevron-right::before { content: "▶"; }
        .fa-tasks::before { content: "📝"; }
        .fa-check::before { content: "✅"; }
        .fa-times::before { content: "❌"; }
        .fa-percentage::before { content: "%"; }
        .fa-search::before { content: "🔍"; }
        .fa-bars::before { content: "☰"; }
        .far.fa-heart::before { content: "🤍"; }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <span>在线练习题系统</span>
            </div>
            <nav class="nav">
                <button class="nav-btn" onclick="showStats()">
                    <i class="fas fa-chart-bar"></i>
                    统计
                </button>
                <button class="nav-btn" onclick="showFavorites()">
                    <i class="fas fa-heart"></i>
                    收藏
                </button>
                <button class="nav-btn" onclick="showWrongQuestions()">
                    <i class="fas fa-times-circle"></i>
                    错题本
                </button>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <div class="main-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h3>题目分类</h3>
            </div>
            <div class="category-list">
                <div class="category-item active" data-category="all">
                    <i class="fas fa-list"></i>
                    <span>全部题目</span>
                    <span class="count" id="all-count">0</span>
                </div>
                <div class="category-item" data-category="single">
                    <i class="fas fa-dot-circle"></i>
                    <span>单选题</span>
                    <span class="count" id="single-count">0</span>
                </div>
                <div class="category-item" data-category="multiple">
                    <i class="fas fa-check-square"></i>
                    <span>多选题</span>
                    <span class="count" id="multiple-count">0</span>
                </div>
                <div class="category-item" data-category="judge">
                    <i class="fas fa-balance-scale"></i>
                    <span>判断题</span>
                    <span class="count" id="judge-count">0</span>
                </div>
            </div>
            
            <div class="subject-list">
                <h4>学科分类</h4>
                <div class="subject-item" data-subject="math">
                    <i class="fas fa-calculator"></i>
                    <span>数学</span>
                </div>
                <div class="subject-item" data-subject="chinese">
                    <i class="fas fa-book"></i>
                    <span>语文</span>
                </div>
                <div class="subject-item" data-subject="english">
                    <i class="fas fa-language"></i>
                    <span>英语</span>
                </div>
                <div class="subject-item" data-subject="science">
                    <i class="fas fa-flask"></i>
                    <span>科学</span>
                </div>
            </div>
        </aside>

        <!-- Content Area -->
        <main class="content">
            <!-- Question Display -->
            <div id="question-container" class="question-container">
                <div class="question-header">
                    <div class="question-info">
                        <span class="question-type" id="question-type"></span>
                        <span class="question-number" id="question-number"></span>
                        <div class="question-actions">
                            <button class="action-btn favorite-btn" onclick="toggleFavorite()" id="favorite-btn">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="question-content">
                    <div class="question-text" id="question-text"></div>
                    <div class="options-container" id="options-container"></div>
                </div>
                
                <div class="question-footer">
                    <div class="question-controls">
                        <button class="btn btn-secondary" onclick="previousQuestion()" id="prev-btn">
                            <i class="fas fa-chevron-left"></i>
                            上一题
                        </button>
                        <button class="btn btn-primary" onclick="submitAnswer()" id="submit-btn">
                            提交答案
                        </button>
                        <button class="btn btn-secondary" onclick="nextQuestion()" id="next-btn">
                            下一题
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                
                <div class="answer-feedback" id="answer-feedback" style="display: none;">
                    <div class="feedback-content">
                        <div class="feedback-result" id="feedback-result"></div>
                        <div class="feedback-explanation" id="feedback-explanation"></div>
                    </div>
                </div>
            </div>

            <!-- Statistics Panel -->
            <div id="stats-panel" class="stats-panel" style="display: none;">
                <h2>练习统计</h2>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number" id="total-answered">0</div>
                            <div class="stat-label">已答题目</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon correct">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number" id="correct-count">0</div>
                            <div class="stat-label">正确题目</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon wrong">
                            <i class="fas fa-times"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number" id="wrong-count">0</div>
                            <div class="stat-label">错误题目</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-percentage"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-number" id="accuracy-rate">0%</div>
                            <div class="stat-label">正确率</div>
                        </div>
                    </div>
                </div>
                
                <div class="progress-section">
                    <h3>学科进度</h3>
                    <div class="progress-list" id="subject-progress"></div>
                </div>
            </div>

            <!-- Favorites Panel -->
            <div id="favorites-panel" class="favorites-panel" style="display: none;">
                <div class="panel-header">
                    <h2>收藏题目</h2>
                    <button class="clear-btn" onclick="clearFavorites()">
                        <i class="fas fa-trash"></i>
                        清空收藏
                    </button>
                </div>
                <div class="favorites-list" id="favorites-list"></div>
            </div>

            <!-- Wrong Questions Panel -->
            <div id="wrong-panel" class="wrong-panel" style="display: none;">
                <div class="panel-header">
                    <h2>错题本</h2>
                    <button class="clear-btn" onclick="clearWrongQuestions()">
                        <i class="fas fa-trash"></i>
                        清空错题本
                    </button>
                </div>
                <div class="wrong-list" id="wrong-list"></div>
            </div>
        </main>
    </div>

    <!-- Mobile Menu Toggle -->
    <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
        <i class="fas fa-bars"></i>
    </button>

    <!-- Scripts -->
    <script src="data.js"></script>
    <script src="script.js"></script>
    
    <!-- Debug script -->
    <script>
        // Add some debug information
        window.addEventListener('load', function() {
            console.log('Page loaded successfully');
            console.log('questionDatabase available:', typeof questionDatabase !== 'undefined');
            console.log('QuestionSystem available:', typeof QuestionSystem !== 'undefined');
            if (typeof questionDatabase !== 'undefined') {
                console.log('Number of questions:', questionDatabase.length);
            }
        });
        
        // Error handling
        window.addEventListener('error', function(e) {
            console.error('Error occurred:', e.error);
            alert('发生错误: ' + e.error.message + '\n请检查浏览器控制台获取更多信息。');
        });
    </script>
</body>
</html>